<template>
  <div>
    <!-- 银幕-->
    <sn-row-has-two-col :left="4" :right="20">
      <div slot="one-col" style="min-height: 36px"></div>
      <div slot="two-col" class="screen-container">
        <div class="screen">
          银幕中央
        </div>
        <div :style="{'height':lineHeight}"
             class="c-screen-line"></div>
      </div>
    </sn-row-has-two-col>
    <!-- 座位-->
    <el-row :gutter="10" v-for="row in seats">
      <!-- 行号-->
      <el-col :span="colNumberSpace" class="col-number">
        {{ row.x }}
      </el-col>
      <!-- 显示座位-->
      <el-col
          :span="2"
          v-for="col in row.cols"
          class="seat-container">
        <el-link
            @click="clickSeat(row.x,col.y,col.status,col.seatId)"
            :underline="false">
          <el-image v-show="col.status === 0" :src="canChoose" class="seat"/>
          <el-image v-show="col.status === 1" :src="hasSale" class="seat"/>
          <el-image v-show="col.status === 2" :src="chooseIt" class="seat"/>
        </el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ChooseSeatView",
  data() {
    return {
      //行号所占空间
      //7*7 用6
      //8*8 用4
      //9*9 用4
      colNumberSpace: 6,
      canChoose: require('@/assets/image/order/kexuanzuowei.png'),
      hasSale: require('@/assets/image/order/yishouzuowei.png'),
      chooseIt: require('@/assets/image/order/yixuanzuowei.png'),
      //屏幕中线
      //9*9 用400px
      //8*8 用350px
      //7*7 用300px
      lineHeight: '300px',
      //座位状态 0 是可选 1已售买 2是选中
      seats: []

      //     [
      //   {
      //     x: 1,
      //     cols: [
      //       {
      //         seatId: 1,
      //         status: 0,
      //         y: 1
      //       },
      //       {
      //         seatId: 2,
      //         status: 0,
      //         y: 2
      //       },
      //       {
      //         seatId: 3,
      //         status: 0,
      //         y: 3
      //       },
      //       {
      //         seatId: 4,
      //         status: 0,
      //         y: 4
      //       },
      //       {
      //         seatId: 5,
      //         status: 0,
      //         y: 5
      //       },
      //       {
      //         seatId: 6,
      //         status: 0,
      //         y: 6
      //       },
      //       {
      //         seatId: 7,
      //         status: 0,
      //         y: 7
      //       },
      //       {
      //         seatId: 8,
      //         status: 0,
      //         y: 8
      //       },
      //       {
      //         seatId: 9,
      //         status: 0,
      //         y: 9
      //       },
      //     ]
      //   }
      // ]
    }
  },
  created() {
    this.setColNumberSpace()
    this.getAllSeats()
  },

  methods: {
    //设置行号所占空间
    setColNumberSpace() {
      if (this.seats.length === 7) {
        this.colNumberSpace = 6
        this.lineHeight = '300px'
      } else if (this.seats.length === 8) {
        this.colNumberSpace = 4
        this.lineHeight = '350px'
      } else {
        this.colNumberSpace = 4
        this.lineHeight = '400px'
      }
    },
    // 向后端发送请求获取所有的座位信息
    getAllSeats() {
      let {movieInfo, fieldInfo} = this.$store.getters.getChooseSeatPageData
      let cinemaId = this.$store.getters.getCinemaId
      let movieId = movieInfo.movieId
      let showDate = fieldInfo.showDate
      let hallId = fieldInfo.hall.id
      this.$http({
        url: `/web/cinema/info/getAllSeats/${cinemaId}/${hallId}/${movieId}/${showDate}`,
        method: 'get'
      }).then(({data}) => {
        let {seatRows} = data.data
        //初始化座位 并获取
        this.seats = []
        for (let i = 0; i < seatRows.length; i++) {
          this.seats.push(seatRows[i])
        }
        //设置行号
        this.setColNumberSpace()
      })
    },
    clickSeat(x, y, status, id) {
      let seats = this.seats
      //1.向父组件发送点击座位的事件
      let seatInfo = {
        x, y, status, id
      }
      //状态为1 说明已经售出
      if (status !== 1) {
        this.$emit('clickSeat', seatInfo)
      }
    },
    //选择座位
    chooseSeat(x, y, status) {
      let seats = this.seats
      if (status === 2) {
        //2.取消选中
        for (let i = 0; i < seats.length; i++) {
          if (seats[i].x === x) {
            //获取当前行的所有列
            let cols = seats[i].cols
            for (let j = 0; j < cols.length; j++) {
              if (cols[j].y === y) {
                let seat = cols[j]
                //修改座位的状态
                seat.status = 0
                break
              }
            }
            break
          }
        }
      } else if (status === 0) {
        //3.选中座位
        for (let i = 0; i < seats.length; i++) {
          if (seats[i].x === x) {
            //获取当前行的所有列
            let cols = seats[i].cols
            for (let j = 0; j < cols.length; j++) {
              if (cols[j].y === y) {
                let seat = cols[j]
                //修改座位的状态
                seat.status = 2
                break
              }
            }
            break
          }
        }
      }
    }
  },
}
</script>

<style scoped>
.screen {
  width: 560px;
  padding-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: url() no-repeat;
  background-position-x: center;
  position: relative;
  margin-bottom: 40px;
}

.col-number {
  font-size: 14px;
  color: #999;
  text-align: center;
}

.seat {
  height: 40px;
  width: 40px;
  position: relative;
  bottom: 15px;
}

.c-screen-line {
  width: 0;
  border-left: 2px dashed #e5e5e5;
  position: absolute;
  top: 90px;
  bottom: 0;
  left: 49%;
}

</style>